<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptions">
      <template #form="{ form }">
        <VGroup>
          <el-select v-model="form.supplier.type" style="width: 130px" clearable placeholder="退货状态">
            <el-option label="退货单号" value="return_no"></el-option>
            <el-option label="sku" value="sku"></el-option>
            <el-option label="退货单号/SKU" value="return_no_sku"></el-option>
          </el-select>
          <VBatchInput v-model="form.supplier.value" @search="query" class="w-60" />
        </VGroup>
        <VSelect v-model="form.return_status" :options="options.return_status" style="min-width: 160px" multiple collapse-tags clearable filterable placeholder="退货状态" />
        <VSelect v-model="form.is_temporary" :options="options.is_temporary" style="min-width: 160px" multiple collapse-tags clearable filterable placeholder="来源类型" />
        <VSelect v-model="form.supplier_id" type="supplier" style="min-width: 160px" multiple collapse-tags clearable filterable placeholder="供应商" />
        <VSelect v-model="form.warehouse_id" type="warehouse" style="min-width: 160px" multiple collapse-tags clearable filterable placeholder="退货仓库" />
        <VSelect v-model="form.return_way" :options="options.return_way" style="min-width: 160px" multiple collapse-tags clearable filterable placeholder="退货方式" />
        <VCascader v-model="form.create_user_id" placeholder="申请人" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VCascader v-model="form.warehouse_people_id" placeholder="仓库处理人" multiple collapse-tags filterable clearable style="min-width: 160px" />
        <VGroup>
          <el-select v-model="form.dateRange.type" style="width: 130px">
            <el-option label="单据生成时间" value="create_time"></el-option>
            <el-option label="退货时间" value="warehouse_handle_time"></el-option>
          </el-select>
          <VDate v-model="form.dateRange.value" />
        </VGroup>
      </template>
      <template #toolbar_btns>
        <VButton auth="/purchase/supplier/return/add" type="primary" @click="create(tableRef)"><i class="dk-iconfont icon-Plus" />添加
        </VButton>
        <VAudit :auth="['/purchase/supplier/return/purchase_audit', '/purchase/supplier/return/director_of_operations_audit', '/purchase/supplier/return/financial_audit']"
          field="sr_id" url="/v1/supplier/supplier-return/batch-audit" :tableRef="tableRef" :list="options.batch_audit_status" @success="query" />
        <VExport auth="/purchase/supplier/return/derive" mainKey="sr_id" url="/v1/supplier/supplier/export" :name="name" :tableRef="tableRef" task class="ml-auto" />
      </template>
    </VTable>
    <Add ref="addRef" :options="options" @success="query" />
    <VLog ref="logRef" />
  </VPage>
</template>
  
<script setup lang="jsx" name="Account">
import api from './api'
import Add from './components/Add.vue'
import { getOption } from '@/api/public'
import { ElMessage, ElMessageBox } from 'element-plus'
const name = 'supplier_return'
const tableRef = ref()
const logRef = ref()
const loadings = reactive({})
// 查询
const query = () => {
  tableRef?.value.query()
}

// 新增
const addRef = ref()
const create = () => {
  addRef?.value.open()
}

// 提交
const submit = (sr_id, rowIndex) => {
  loadings['submit' + rowIndex] = true
  api.submit({ sr_id }).then(res => {
    ElMessage.success('提交成功')
  }).finally(() => {
    loadings['submit' + rowIndex] = false
  })
}

// 获取options
const options = ref({})
getOption({ type: name }).then(res => {
  options.value = res.data
  // 测试数据
  options.value.test = [{ label: '1', value: '1' }]
})

// 确认收款
const confirm = (sr_id, rowIndex) => {
  ElMessageBox.confirm(
    '是否确认收到供应商的退款？',
    '确认收款',
    {
      confirmButtonText: '确 定',
      cancelButtonText: '取 消',
    }
  )
    .then(() => {
      loadings['audit' + rowIndex] = true
      api.batchAudit({sr_ids: [sr_id],audit_result: 1, audit_status: 6 }).then(res => {
        ElMessage({
          type: 'success',
          message: '操作成功',
        })
        query()
      }).finally(() => {
        loadings['audit' + rowIndex] = false
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
}

// 列表配置
const tableOptions = reactive({
  rowConfig: { height: 92 },
  showHeaderOverflow: false,
  showOverflow: false,
  formConfig: {
    data: {
      supplier: { type: 'return_no', value: '' }, // 组合
      dateRange: { type: 'create_time', value: [], range: true }, // 组合
      is_temporary: [],
    }
  },
  columns: [
    { type: 'checkbox', fixed: 'left', width: 40 },
    {
      title: '退货单号', minWidth: 180, slots: {
        default: ({ row }) => {
          return <VText value={row.return_no} type='button' copy onClick={() => addRef?.value.open(row.sr_id, true)} />
        }
      }
    },
    {
      title: '供应商信息', minWidth: 240, slots: {
        default: ({ row }) => {
          return < div >
            <VText title='供应商' value={row.supplier_name} />
            <VText title='结算方式' value={row.period_ways_name} />
          </div >
        }
      }
    },
    {
      title: '退货单状态', field: 'return_status_name', minWidth: 100, slots: {
        default: ({ row }) => <VText value={row.return_status_name} />
      }
    },
    {
      title: 'sku', field: 'sku', minWidth: 200, slots: {
        default: ({ row }) => <VText value={row.sku} line={3} />
      }
    },
    {
      title: '退货仓库', minWidth: 160, slots: {
        default: ({ row }) => <VText value={row.warehouse_name} />
      }
    },
    {
      title: '退款金额', minWidth: 100, slots: {
        default: ({ row }) => <VText value={row.total_amount} />
      }
    },
    {
      title: '退货方式', field: 'return_type_name', minWidth: 100, slots: {
        default: ({ row }) => <VText value={row.return_type_name} />
      }
    },
    {
      title: '快递公司运单号', field: 'express_no', minWidth: 160, slots: {
        default: ({ row }) => <VText value={row.express_no} />
      }
    },
    {
      title: '运费', field: 'express_fee', minWidth: 90, slots: {
        default: ({ row }) => <VText value={row.express_fee} />
      }
    },
    {
      title: '退货地址', field: '', minWidth: 120, slots: {
        default: ({ row }) => <VText value={row.recipient_area_name.join('') + row.recipient_address} line={3} />
      }
    },
    {
      title: '退货备注', field: 'remark', minWidth: 120, slots: {
        default: ({ row }) => <VText value={row.remark} line={3} />
      }
    },
    {
      title: '申请人/生成时间/审核人/审核时间', minWidth: 180, slots: {
        header: () => <div>申请人/生成时间<br />审核人/审核时间</div>,
        default: ({ row }) => {
          const { create_user, create_time, audit_user_name, audit_time } = row
          return < div >
            <VText title='申请人' value={create_user} />
            <VText value={create_time} />
            <VText title='审核人' value={audit_user_name} />
            <VText value={audit_time} />
          </div >
        }
      }
    },
    {
      title: '仓库处理人员/退货时间', minWidth: 180, slots: {
        default: ({ row }) => {
          const { warehouse_people_name, warehouse_handle_time } = row
          return < div >
            <VText value={warehouse_people_name} />
            <VText value={warehouse_handle_time} />
          </div >
        }
      }
    },
    {
      title: '操作', width: 100, fixed: 'right', slots: {
        default: ({ row, rowIndex }) => {
          const { sr_id, return_status } = row
          // return_status 退货单状态, 1待提交，2待采购审核，3待运营总监审核，4财务审核，5待仓库处理，6待确认收款，7已完结，8已驳回
          return <div class='nm flex flex-col gap-1 items-start'>
            {[1, 8].includes(return_status) ? <div>
              <VButton auth="/purchase/supplier/return/edit" link type="primary" onClick={() => addRef?.value.open(sr_id)}>编辑</VButton>
              <VButton auth="/purchase/supplier/return/add" link type="primary" loading={loadings['submit' + rowIndex]} onClick={() => submit(sr_id, rowIndex)}>提交</VButton>
            </div> : ''}
            {[6].includes(return_status) ? <VButton auth="/purchase/supplier/return/acknowledge_receipt"  loading={loadings['audit' + rowIndex]} link type="primary" onClick={() => confirm(sr_id, rowIndex)}>确认收款</VButton> : ''}
            <VButton auth="/purchase/supplier/return/view" link type="primary" onClick={() => addRef?.value.open(sr_id, true)}>查看</VButton>
            <VButton auth="/purchase/supplier/return/logs" link type="primary" onClick={() => logRef?.value.open({ log_type: name, sr_id })}>日志</VButton>
          </div>
        }
      }
    },
  ],
  proxyConfig: {
    autoLoad: false,
    ajax: {
      query: ({ page, form }) => api.query({ ...form, ...page })
    }
  }
})
</script>
  